<template>
	<div class="map">
		<h3>货源地地图分布</h3>
		<div id="container" ref="baiduRef"></div>
	</div>
</template>

<script lang= "ts" setup>
import { onMounted, ref } from 'vue';

const baiduRef = ref()

onMounted(() => {
	const map = new BMapGL.Map('container');
	map.centerAndZoom(new BMapGL.Point(104.04767608141508,30.63681859977784), 15);
	map.enableScrollWheelZoom(true);
	var navi3DCtrl = new BMapGL.NavigationControl3D();  // 添加3D控件
	map.addControl(navi3DCtrl);

	// 创建城市选择控件
	const cityControl = new BMapGL.CityListControl({
		// 控件的停靠位置（可选，默认左上角）
		anchor: BMAP_ANCHOR_TOP_LEFT,
		// 控件基于停靠位置的偏移量（可选）
		offset: new BMapGL.Size(10, 5)
	});
	// 创建点标记
	const marker1 = new BMapGL.Marker(new BMapGL.Point(104.03462950574536,30.631627910151966));
	const marker2 = new BMapGL.Marker(new BMapGL.Point(104.04767608141508,30.63681859977784));
	const marker3 = new BMapGL.Marker(new BMapGL.Point(104.05564914582008,30.627579539402976));
	const marker4 = new BMapGL.Marker(new BMapGL.Point(104.03350216173682,30.61626518574051));
	const marker5 = new BMapGL.Marker(new BMapGL.Point(104.03836813478111,30.66658664707655));
	const marker6 = new BMapGL.Marker(new BMapGL.Point(104.0768221836532,30.62306169109991));
	const marker7 = new BMapGL.Marker(new BMapGL.Point(104.07170728187965,30.595897922402102));
	
	// 在地图上添加点标记
	map.addOverlay(marker1);
	map.addOverlay(marker2);
	map.addOverlay(marker3);
	map.addOverlay(marker4);
	map.addOverlay(marker5);
	map.addOverlay(marker6);
	map.addOverlay(marker7);

	// 将控件添加到地图上
	map.addControl(cityControl);

	// 创建定位控件
	var locationControl = new BMapGL.LocationControl({
		// 控件的停靠位置（可选，默认左上角）
		anchor: BMAP_ANCHOR_TOP_RIGHT,
		// 控件基于停靠位置的偏移量（可选）
		offset: new BMapGL.Size(20, 20)
	});
	// 将控件添加到地图上
	map.addControl(locationControl);

	// 添加定位事件
	locationControl.addEventListener("locationSuccess", function (e: { addressComponent: { province: string; city: string; district: string; street: string; streetNumber: string; }; }) {
		var address = '';
		address += e.addressComponent.province;
		address += e.addressComponent.city;
		address += e.addressComponent.district;
		address += e.addressComponent.street;
		address += e.addressComponent.streetNumber;
		alert("当前定位地址为：" + address);
	});
	locationControl.addEventListener("locationError", function (e: { message: any; }) {
		alert(e.message);
	});

})

</script>

<style lang= "less" scoped>
.map {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	position: relative;
}

#container {
	width: 100vw;
	height: 88vh;
}

h3 {
	position: absolute;
	top: 30px;
	left: 0;
	z-index: 1;
}
</style>
